<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-statistic title="总阅读量" :value="statistic.viewCount">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="总点赞量" :value="statistic.voteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="点赞率"
                :value="voteRate"
                :precision="2"
                suffix="%"
                :value-style="{ color: '#cf1322' }"
              >
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br />
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                title="今日阅读"
                :value="statistic.todayViewCount"
                style="margin-right: 50px"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                title="预计今日阅读"
                :value="statistic.todayViewIncrease"
                :value-style="{ color: '#0000ff' }"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                title="预计今日阅读增长"
                :value="statistic.todayViewIncreaseRateAbs"
                :precision="2"
                suffix="%"
                class="demo-class"
                :value-style="
                  statistic.todayViewIncreaseRate < 0
                    ? { color: '#3f8600' }
                    : { color: '#cf1322' }
                "
              >
                <template #prefix>
                  <arrow-down-outlined
                    v-if="statistic.todayViewIncreaseRate < 0"
                  />
                  <arrow-up-outlined
                    v-if="statistic.todayViewIncreaseRate >= 0"
                  />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-col :span="24" id="main-col">
        <div id="main" style="width: 100%; height: 300px"></div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" id="main-col">
        <div id="main" style="width: 100%; height: 300px"></div>
      </a-col>
    </a-row>
  </div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import * as echarts from "echarts";
import { computed } from "vue";


const init30DayEcharts = (list) => {
  // 发布生产后出现问题：切到别的页面，再切回首页，报表显示不出来
  // 解决方法：把原来的id=main的区域清空，重新初始化
  const mainDom = document.getElementById("main-col");
  if (mainDom) {
    mainDom.innerHTML =
      '<div id="main" style="width: 100%;height:300px;"></div>';
  }
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main"));

  const xAxis = [];
  const seriesView = [];
  const seriesVote = [];
  for (let i = 0; i < list.length; i++) {
    const record = list[i];
    xAxis.push(record.date); //构造x轴 数据 日期
    seriesView.push(record.viewIncrease);
    seriesVote.push(record.voteIncrease);
  }

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "30天趋势图",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总阅读量", "总点赞量"],
    },
    grid: {
      left: "1%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "总阅读量",
        type: "line",
        // stack: '总量', 不堆叠
        data: seriesView,
        smooth: true,
      },
      {
        name: "总点赞量",
        type: "line",
        // stack: '总量', 不堆叠
        data: seriesVote,
        smooth: true,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

const get30DayStatistic = () => {
  axios.get("/ebookSnapshot/get30Statistic").then((response) => {
    const data = response.data;
    if (data.success) {
      const statisticList = data.content;
      init30DayEcharts(statisticList);
    }
  });
};

const statistic = ref();
statistic.value = {};
const voteRate = ref();
const getStatistic = () => {
  axios.get("/ebookSnapshot/getStatistic").then((response) => {
    const data = response.data;
    if (data.success) {
      const statisticResp = data.content;
      //设置今天点赞数及阅读数
      statistic.value.viewCount = statisticResp[0].viewCount;
      statistic.value.voteCount = statisticResp[0].voteCount;
      statistic.value.todayViewCount = statisticResp[0].viewIncrease;
      statistic.value.todayVoteCount = statisticResp[0].voteIncrease;

      voteRate.value =( statisticResp[0].voteCount / statisticResp[0].viewCount) * 100;

    console.log( "statistic.value.viewCount" +voteRate.value)
      // 按分钟计算当前时间点，占一天的百分比
      const now = new Date();
      //今天的分钟/一天的分钟数  获得 今天 过去的百分比
      const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
      // console.log(nowRate)
      //今天阅读数/今天的百分比 = 今天预计总阅读数
      statistic.value.todayViewIncrease = parseInt(
        String(statisticResp[0].viewIncrease / nowRate)
      );
      // todayViewIncreaseRate：今日预计增长率
      if (statisticResp[0].viewIncrease === 0) {
        //同比增长率计算时，上期值为0，则增长率为100%。 昨日增长率为0的话，那么考虑增长率无意义
        statistic.value.todayViewIncreaseRate = 100;
      } else {
        //今日增长率 = (今天阅读数-昨天阅读数) /昨天阅读数*100
        statistic.value.todayViewIncreaseRate =
          ((statistic.value.todayViewIncrease - statisticResp[0].viewIncrease) /
            statisticResp[0].viewIncrease) *
          100;
      }
      //获取绝对值显示  Math.abs
      statistic.value.todayViewIncreaseRateAbs = Math.abs(
        statistic.value.todayViewIncreaseRate
      );
    }
  });
};

onMounted(() => {
  getStatistic();
  get30DayStatistic();
});
</script>
<style scoped>
</style>